<template>
	<view class="bigView">
		<view class="topView2" :style="[{height:CustomBar+20 + 'px'}]">
			<view class="title2" :style="[{height:'44px',marginTop: StatusBar+'px'}]">
				
			</view>
			<view style="width: 100vw;flex: 1;display: flex;flex-direction: row;z-index: 2;">
				
				<view style="flex: 1;" @click="closeHandle">
					<image src="/static/img/icon_back.png" class="closeImg" ></image>
				</view>
				<view style="font-weight: bold;font-size: 38rpx;color: #000000;padding-bottom: 20rpx;flex: 1;display: flex;align-items: center;justify-content: center;">付款</view>
				<view style="flex: 1;"></view>
			</view>
		</view>
		<view class="topView">
			<!-- <view class="item">
				<view class="title">付款积分</view>
				<view class="inputView">
					<u--input
					    placeholder="请输入积分"
					    border="surround"
					    v-model="form.ruleSettings"
					  ></u--input>
				</view>
			</view>
			<view class="item" style="margin-top: 8px;">
				<view class="title">支付密码</view>
				<view class="inputView">
					<u--input
					    placeholder="请输入支付密码"
					    border="surround"
					    v-model="form.paymentPassword"
						type="password"
					  ></u--input>
				</view>
			</view> -->
			<view class="headView">
				<view>
					<image :src="headerUrl" v-if="headerUrl" class="headImg"></image>
					<image src="/static/img/user_placeholder_img.png" class="headImg" v-else></image>
				</view>
				<view class="headName">
					<view style="font-size: 40rpx;color: #333333;">付款给</view>
					<view style="color: #3275FA;font-size: 34rpx;">{{payName}}</view>
				</view>
			</view>
			<view class="priceView">
				<view class="left">￥</view>
				<view class="right">
					  <!-- <u-input
					    placeholder="请输入金额"
					    border="surround"
					    v-model="form.ruleSettings"
					    customStyle="font-size: 60px;"
						style="font-size: 60px;"
						class="my-input"
					  ></u-input> -->
					<input
					  placeholder="请输入付款金额"
					  border="surround"
					  v-model="form.ruleSettings"
					  customStyle="font-size: 60px;"
						style="font-size: 40rpx;font-weight: bold;"
						class="my-input"
					></input>
				</view>
			</view>
		</view>
		<jia-PayKeyboard :overlayClose="false" :confirmStyle="{backgroundColor:'#3275FA'}	" ref="keyWord" confirmText="付款" v-model="form.ruleSettings" @input="inp" @confirm="submitConfirm" @hide="hide"></jia-PayKeyboard>

		<u-popup :show="show" @close="close" @open="open" :round="10">
			<image @click="show=false" src="/static/img/icon_close.png" style="width: 30rpx;height: 30rpx;margin-top: 30rpx;margin-left: 30rpx;"></image>
			<view class="payTitle">
				<image :src="headerUrl" v-if="headerUrl" class="payImg"></image>
				<view style="color: #333333;font-size: 32rpx;margin-left: 12rpx;">付款给</view>
				<view style="color: #3275FA;font-size: 32rpx;">{{payName}}</view>
			</view>
			<view class="payPrice">
				<view style="font-size: 45.6rpx;color:#000000;margin-bottom: 10rpx;">￥</view>
				<view style="font-size: 72rpx;color:#000000">{{form.ruleSettings}}</view>
			</view>
			<view class="payMethod">付款方式</view>
			<view class="jfView">
				<view class="jfLeft">
					<image src="/static/img/jf_icon.png" class="jfIcon"></image>
					<view style="font-size: 36rpx;color: #333333;font-weight: bold;margin-left: 11rpx;">积分</view>
					<view style="margin-left: 11rpx;color: #666666;font-size: 29rpx;">剩余{{points2}}</view>
				</view>
				<image src="/static/img/icon_right.png" class="iconRight"></image>
			</view>
			<view class="pwdView">
				<view class="pwdItem"><view class="pwdItem2" v-if="payPwd.length>=1"></view></view>
				<view class="pwdItem"><view class="pwdItem2" v-if="payPwd.length>=2"></view></view>
				<view class="pwdItem"><view class="pwdItem2" v-if="payPwd.length>=3"></view></view>
				<view class="pwdItem"><view class="pwdItem2" v-if="payPwd.length>=4"></view></view>
				<view class="pwdItem"><view class="pwdItem2" v-if="payPwd.length>=5"></view></view>
				<view class="pwdItem"><view class="pwdItem2" v-if="payPwd.length>=6"></view></view>
			</view>
			<!-- <view class="keyBordView">
				
			</view> -->
			<view style="width: 100vw;height: 160rpx;"></view>
			<view class="calculator">
			  <!-- 动态生成按钮 -->
			  <view class="row" v-for="(item,index) in rows" :key="index">
			    <view class="button2" v-for="(item2,index2) in item" :key="index2" @click="inputPwdHandle(item2)">
			      {{item2}}
			    </view>
			  </view>
			</view>
			<view class="bottomView2">
				<view class="bottomItem"></view>
				<view class="bottomItem" style="background-color: #FFFFFF;font-size: 40rpx;font-weight: bold;" @click="inputPwdHandle('0')">0</view>
				<view class="bottomItem" @click="inputPwdHandle('X')">
					<image src="/static/img/wechat_del.png" style="height: 50rpx;width: 50rpx;"></image>
				</view>
			</view>
			<!-- <view style="height: 40px;"></view> -->
			<!-- <view :style="[{height:bottom + 'px'}]" class="bottomView3">
				
			</view> -->
			<view :style="[{height:'30px'}]" class="bottomView3">
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { isJZNull } from '../../utils/auth'
	import points from '@/api/points.js'
	import mine from '@/api/mine.js'
	export default{
		data(){
			return {
				bottom:0,
				status:0,
				userInfo:{},
				shopId:'',
				headerUrl:'',
				show: false,
				points2:'',
				rows: [
				  ['1', '2', '3'],
				  ['4', '5', '6'],
				  ['7', '8', '9'],
				  
				],
				payPwd:'',
				form:{
					ruleSettings:'',
					userId:'',
					paymentPassword:''
				},
				payName:'',
				StatusBar: 0,
				CustomBar: 0,
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom - 20;
				// this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				this.TopHeight = this.CustomBar+100;
				// this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}})
			setTimeout(()=>{
				this.$refs.keyWord.open();
			},1000)
			
		},
		onLoad(options){
			if(options.shopId){
				this.shopId = options.shopId;
			}
			this.initUserInfo()
		},
		methods:{
			closeHandle(){
				uni.switchTab({
					url:'/pages/mine/index'
				})
			},
			myPointsHandle(){
				mine.myPointsHandle({}).then(res =>{
					this.points2 = res;
				}).catch(error =>{
					
				})
			},
			inputPwdHandle(value){
				if(value == 'X'){ // 删除
					if(isJZNull(this.payPwd)) {
						console.log("没内容")
						return
					}
					this.payPwd = this.payPwd.slice(0, -1); // 删除最后一个字符
					this.form.paymentPassword = this.payPwd;
					console.log(this.payPwd)
					return
				}
				this.payPwd += value
				this.form.paymentPassword = this.payPwd;
				if(this.payPwd.length==6){
					this.sureHandle()
				}
				console.log(this.payPwd)
				
			},
			open() {
			  // console.log('open');
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
			inp(e) {
				console.log(e);
				console.log("1231313")
			},
			hide() {
				console.log('关闭');
			},
			submitConfirm(e){
				// this.$refs.keyWord.close();
				if(isJZNull(this.form.ruleSettings)){
					uni.showToast({
						icon:'none',
						title:"积分不能为空"
					})
					return;
				}
				this.payPwd = ''
				this.form.paymentPassword = ''
				this.show = true
			},
			sureHandle(){
				if(isJZNull(this.form.ruleSettings)){
					uni.showToast({
						icon:'none',
						title:"积分不能为空"
					})
					return;
				}
				if(isJZNull(this.form.paymentPassword)){
					uni.showToast({
						icon:'none',
						title:"支付密码不能为空"
					})
					return;
				}
				uni.showLoading({
					title:"提交中..."
				})
				points.deductPaymentUser({
					shopId: this.shopId,
					userId:this.form.userId,
					ruleSettings:this.form.ruleSettings,
					paymentPassword:this.form.paymentPassword
				}).then(res=>{
					uni.hideLoading();
					// uni.showToast({
					// 	icon:'none',
					// 	title:"操作成功"
					// })
					// uni.navigateBack()
					setTimeout(()=>{
						this.jumpPayResult(res.ruleSettings,res.shopName,res.createdAtView)
					},500)
					
				}).catch(err=>{
					uni.hideLoading()
				})
				
			},
			jumpPayResult(value,shopName,dateStr){
				uni.navigateTo({
					url: '/pageageMine/pages/userPayResult?ruleSettings='+value+'&shopName='+shopName+'&dateStr='+dateStr
				})
			},
			initUserInfo(){
				const userInfo = uni.getStorageSync("userInfo")
				if(userInfo){
					this.userInfo = JSON.parse(userInfo);
					this.form.userId = this.userInfo.id;
					this.headerUrl = this.userInfo.headPicUrl;
					this.getShopById();
					this.myPointsHandle();
					// this.jumpPayResult(12,'测试',"2025-12-01 00:12:00")
				}
				
			},
			getShopById(){
				points.getShopById({id:this.shopId}).then(res=>{
					this.payName = res.shopName;
				}).catch(err=>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.closeImg{
		margin-top: 20rpx;
		margin-left: 20rpx;
		width: 62rpx;
		height: 62rpx;
	}
	.topView2{
		width: 100vw;
		// background-color: red;
		display: flex;
		// align-items: center;
		justify-content: center;
		// background-color: red;
		display: flex;
		flex-direction: column;
	}
	.title2{
		// background-color: green;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		// z-index: 2;
		font-size: 16px;
		padding-left: 20px;
		font-weight: bold;
		color: #000000;
	}
	.bottomView3{
		background-color: #F0F0F0;
	}
	.bottomView2{
		background-color: #F0F0F0;
		width: 100vw;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 80rpx;
	}
	.bottomItem{
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		border-top: 0.5px solid #F0F0F0; /* 网格线 */
	}
	.keyBordView{
		width: 100vw;
		height: 444rpx;
		background-color: #EDEDED;
		margin-top: 196rpx;
	}
	/* 根容器 */
	.calculator {
	  display: flex;
	  flex-direction: column;
	  width: 100%;
	  margin-top: 160rpx;
	  margin: 0 auto; /* 居中 */
	  background-color: #FFFFFF;
	}
	
	/* 每一行 */
	.row {
	  display: flex;
	  justify-content: space-between;
	  width: 100%;
	  
	}
	
	/* 按钮 */
	.button2 {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  // width: 30%;
	  height: 80rpx;
	  font-size: 40rpx;
	  font-weight: bold;
	  border-right: 0.5px solid #F0F0F0; /* 网格线 */
	  border-top: 0.5px solid #F0F0F0; /* 网格线 */
	  box-sizing: border-box; /* 包含 padding 和 border */
	  flex: 1;
	}
	
	/* 双倍宽度的按钮（如“0”） */
	.double {
	  width: 60%;
	}
	
	/* 最后一行的按钮 */
	.row:last-child .button {
	  border-top: none; /* 避免重复绘制上边框 */
	}
	
	/* 按钮的圆角 */
	.button {
	  border-radius: 4rpx;
	}
	
	/* 按钮的背景色（可选） */
	.button {
	  background-color: #f8f8f8;
	}
	
	/* 按钮的 hover 效果（可选） */
	.button:active {
	  background-color: #e0e0e0;
	}
	.pwdView{
		width: calc(100vw - 160rpx);
		height: 78rpx;
		margin-left: 80rpx;
		margin-top: 48rpx;
		// background-color: red;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.pwdItem{
		// flex: 1;
		width: 78rpx;
		height: 78rpx;
		color: #000000;
		border-radius: 16rpx;
		background-color: #F0F0F0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.pwdItem2{
		width: 30rpx;
		height: 30rpx;
		border-radius: 15rpx;
		background-color: #000000;
	}
	.payTitle{
		width: 100vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 10rpx;
	}
	.payImg {
		width: 45rpx;
		height: 45rpx;
		border-radius: 12rpx;
	}
	.payPrice{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		// background-color: red;
		justify-content: center;
		margin-top: 34rpx;
		font-weight: bold;
	}
	.payMethod{
		color: #666666;
		font-size: 32rpx;
		width: calc(100vw - 64rpx);
		margin-top: 51rpx;
		margin-left: 32rpx;
	}
	.jfView{
		width: calc(100vw - 64rpx);
		margin-left: 32rpx;
		border-radius: 24rpx;
		height: 107rpx;
		background-color: #F5F5F5;
		margin-top: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.jfLeft{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 39rpx;
	}
	.jfIcon{
		width: 48rpx;
		height: 48rpx;
	}
	.iconRight{
		width: 36rpx;
		height: 26rpx;
		margin-right: 30rpx;
	}
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #F5F5F5;
	display: flex;
	flex-direction: column;
	// align-items: center;
	// justify-content: center;
}
.my-custom-input input {
  font-size: 30rpx !important;
}
.headView{
	display: flex;
	flex-direction: row;
	height: 108rpx;
	width: 100vw;
	align-items: center;
}
.headImg{
	width: 108rpx;
	height: 108rpx;
	border-radius: 19rpx;
	margin-left: 32rpx;
}
input{
	font-size: 120px;
}
.u-input__content__field-wrapper__field{
	font-size: 60px;
}
.headName{
	height: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-left: 28rpx;
	font-weight: bold;
}
.priceView{
	width: calc(100vw - 64rpx);
	height: 157rpx;
	background-color: #FFFFFF;
	border-radius: 24rpx;
	margin-left: 32rpx;
	margin-top: 40rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	.left{
		font-size: 60rpx;
		color: #333333;
		font-weight: bold;
		width: 104rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.right{
		flex: 1;
		// font-size: 52rpx;
	}
}

// .item{
// 	width: 100vw;
// 	display: flex;
// 	flex-direction: column;
// 	background-color: white;
// 	.title{
// 		margin-left: 16px;
// 		margin-top: 16px;
// 	}
// 	.inputView{
// 		width: calc(100vw - 32px);
// 		margin-left: 10px;
// 		margin-top: 12px;
// 		margin-bottom: 12px;
// 		// background-color: red;
// 	}
// }
.topView{
	margin-top: 50rpx;
	// flex-grow: 1;
	display: flex;
	flex-direction: column;
}
// .bottomView{
// 	height: 150px;
// 	width: 100vw;
// 	// background-color: yellow;
// 	display: flex;
// 	justify-content: center;
// 	.sure{
// 		width: calc(100vw - 32px);//calc(100vw-#{32px});
// 		height: 48px;
// 		border-radius: 24px;
// 		background-color: #247BFD;
// 		display: flex;
// 		align-items: center;
// 		justify-content: center;
// 		color: white;
// 	}
// }
</style>